<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-for="item in arr" :key="item">{{item}}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data(){
                return {
                    arr:[1, 2, 3],
                    obj:{
                        obj:{
                            obj:{
                                
                            }
                        }
                    }
                }
            },
            mounted() {

            },
        })

        // Vue2对于数组，
        
        // 1. 下标/索引 设置值的时候 不是响应式的 
        // 2. 修改arr.length 数组的长度的时候 不是响应式的  


        // 如果非要让他响应式 
        // 1. Vue.set(vm.arr, 下标，新的val) 等效于 vm.$set(vm.arr, 下标，新的val)
        // 2. 利用7个数组方法 实现数组的响应式
        // push() / pop() / shift() / unshift() / splice() / sort() / reverse()


        // Vue2的缺陷 Object.defineProperty
        // 1. 针对对象 ， 属性的新增和删除 是检测不到的 
        // 2. 针对数组 ， 通过数组下标设置值，或者修改数组的length，不是响应式的








       
    </script>
</body>
</html>